<template>
	<view class="information-change">
		<view class="content-view">
			<view class="content-item">
				<view class="content-item-left">保养单位</view>
				<view class="content-item-right">
					<u--input border="none" v-model="param.inspectionMaintenanceUnitName" color="#666666"
						fontSize="32rpx">
					</u--input>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">保养时间</view>
				<view class="content-item-right" @click="calendar('start')">
					<u--input border="none" v-model="dateObj.start" color="#666666" fontSize="32rpx" disabled
						disabledColor="#ffffff">
					</u--input>
					<image src="../../../static/iconCalendar.png" class="Calendar"></image>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">保养负责人</view>
				<view class="content-item-right">
					<u--input border="none" v-model="param.inspectionMaintenancePrName" color="#666666"
						fontSize="32rpx">
					</u--input>
				</view>
			</view>
			<view class="content-item">
				<view class="content-item-left">下次保养时间</view>
				<view class="content-item-right" @click="calendar('end')">
					<u--input border="none" v-model="dateObj.end" color="#666666" fontSize="32rpx" disabled
						disabledColor="#ffffff">
					</u--input>
					<image src="../../../static/iconCalendar.png" class="Calendar"></image>
				</view>
			</view>
			<view class="cont">
				<view class="content-item-left">保养内容</view>
				<view class="content-item-right">
					<u--textarea border="none" v-model="param.inspectionMaintenanceContent" count maxlength="300">
					</u--textarea>
				</view>
			</view>
			<view class="cont">
				<view class="content-item-left">保养报告</view>
				<view class="cob" @click="checkAttac(param.id)">查看相关附件</view>
				<files-upload @file="onUpload"></files-upload>
			</view>
		</view>
		<view class="btn-view">
			<view class="login-btn but1" @click="goback">取消</view>
			<view class="login-btn but2" @click="sub">保存</view>
		</view>
		<u-calendar :show="show" mode="single" :monthNum="16" :minDate="minDate" :maxDate="maxDate" @close="show=false"
			@confirm="confirm" :defaultDate="defaultDateMultiple"></u-calendar>
		<!-- <u-popup :show="imgShow" mode="center" @close="imgShow = false">
			<view>
				<u-image mode="widthFix" radius="0" width="600rpx" :src="url" :lazy-load="true"></u-image>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				dateObj: {
					start: '',
					end: ''
				},
				param: {
					id: '',
					facilityId: '',
					messageType: '02',
					inspectionMaintenanceUnitName: '',
					inspectionMaintenancePrName: '',
					inspectionMaintenanceContent: '',
					annex: '',
					inspectionMaintenanceDateTime: '',
					nextInspectionMaintenanceDateTime: ""
				},
				show: false,
				//默认时间
				defaultDateMultiple: [`${year}-${month}-${date}`],
				//最小日期
				minDate:`${year}-${month}-${date-30}`,
				maxDate:`${year+2}-${month}-${date+30}`,
				//保养时间类型
				dataType: '',
				//预览图片地址
				// url: '',
				imgShow: false,
				data1: {
					connectId: "",
					classify: "0503",
				},
				flag:true
			}
		},
		onLoad(e) {
			if (e.facilityId) {
				this.param.facilityId = e.facilityId
			}
		},
		methods: {
			// 点击显示日期组件
			calendar(e) {
				this.dataType = e
				this.show = true
			},
			//日期选择
			confirm(e) {
				console.log(e)
				if (e[0]) {
					let dateNum = new Date(e[0]).getTime()
					// 	console.log(dateNum,'嘿嘿嘿')
					this.dataType == 'start' ? this.dateObj.start = e[0] : this.dateObj.end = e[0]
					this.dataType == 'start' ? this.param.inspectionMaintenanceDateTime = dateNum : this.param
						.nextInspectionMaintenanceDateTime = dateNum
					this.show = false
					this.defaultDateMultiple[0] = e[0]
				} else {
					// 	console.log(this.defaultDateMultiple);
					let dateNum = new Date(this.defaultDateMultiple[0]).getTime()
					// 	console.log(dateNum,'嘿嘿嘿')
					this.dataType == 'start' ? this.dateObj.start = this.defaultDateMultiple[0] : this.dateObj.end = this
						.defaultDateMultiple[0]
					this.dataType == 'start' ? this.param.inspectionMaintenanceDateTime = dateNum : this.param
						.nextInspectionMaintenanceDateTime = dateNum
					this.show = false
				}
			},
			//新增保存
			async sub() {
				if(this.flag){
					this.flag = false
					setTimeout(()=>{
						this.flag = true
					},1500)
					if (this.param.inspectionMaintenanceDateTime == '') {
						uni.showToast({
							title: '保养时间未填写',
							icon:'none',
						})
						return
					}
					if (this.param.inspectionMaintenanceContent == '') {
						uni.showToast({
							title: '保养内容未填写',
							icon:'none',
						})
						return
					}
					if (this.param.inspectionMaintenanceDateTime < this.param.nextInspectionMaintenanceDateTime) {
						if (this.param.inspectionMaintenanceUnitName != '' && this.param.inspectionMaintenancePrName !=
							'') {
							console.log(this.param)
							let res = await this.request(this.$api.addInspectionMaintenance, this.param, 'POST')
							if (res.resultValue) {
								uni.showToast({
									title: '添加成功',
									icon: 'success'
								})
								setTimeout(res => {
									uni.navigateBack()
								}, 1000)
							}
							console.log(res)
						} else {
							uni.showToast({
								title: '请检查保养单位及负责人',
								icon: 'none'
							})
						}
					
					} else {
						uni.showToast({
							title: '下次保养时间要大于本次',
							icon: 'none'
						})
					}
				}
			},
			//取消按钮
			goback() {
				uni.navigateBack()
			},
			//上传
			onUpload(e) {
				console.log(e)
				this.param.annex = e.fileName
				this.param.id = e.uuid
			},
			//预览
			checkAttac(id) {
				uni.navigateTo({
					url: './../../checkTheAttachment/checkTheAttachment?classify=0503&connectId=' + id
				})
			}

		}
	}
</script>

<style scoped>
	.information-change {
		height: 100vh;
		overflow: hidden;
		background: #F5F6F9;
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.content-view {
		padding: 0 40rpx;
		background: white;
	}

	.content-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.cont {
		padding: 28rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.content-item-left {
		font-size: 32rpx;
		color: #333333;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		width: 220rpx;
	}

	.content-item-right {
		display: flex;
		flex: 1;
		font-size: 32rpx;
		color: #999;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.password-desc {
		font-size: 28rpx;
		color: #999;
		padding: 28rpx 40rpx 0;
	}

	.btn-view {
		display: flex;
		justify-content: space-between;
		padding: 60rpx 40rpx 0;
	}

	.btn-view .btn {
		height: 96rpx;
		border-radius: 8rpx;
	}

	.login-btn {
		box-sizing: border-box;
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		border-radius: 14rpx;
	}

	.but1 {
		border: 1px solid #3473F9;
		color: #3473F9;
	}

	.but2 {
		background-color: #3473F9;
		color: #FFFFFF;
	}

	.Calendar {
		width: 44rpx;
		height: 44rpx;
	}
	.cob {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3473F9;
	}
</style>
